; (function (w, doc) {


    const addInput = doc.querySelector('.addInput'),
        addBtn = doc.querySelector('.addBtn'),
        ul = doc.querySelector('.list');
    const storage = function (name, defaultValue) {
        const getItem = function () {
            return JSON.parse(localStorage.getItem(name) || defaultValue)
        }
        const setItem = function (value) {
            localStorage.setItem(name, JSON.stringify(value))
        }
        return {
            getItem,
            setItem
        }
    }
    const todoStorage = storage('todo_list', '[]');
    let todoList = todoStorage.getItem();
    function renderView(list) {
        if (!list.length) {
            return
        }
        // ul.innerHTML = '';
        let htmlStr = '',
            completedNum = 0;
        list.forEach(v => {
            if (v.completed) {
                completedNum++
            }
            htmlStr += `<li class="item" >
            <div class="content" data-id='${v.id}' >
                <input type="checkbox" ${v.completed ? 'checked' : ''}> 
                <span ${v.completed ? 'class="active"' : ''} >${v.content}</span>
                <button class='editBtn'>修改</button>
                <button class='delBtn'>删除</button>
            </div>
            <div class="edit-wrap" data-id='${v.id}' >
                <input type="text" class="editInput" > <button class='saveBtn'>确定</button>
          
            </div>
        </li>`
        })
        ul.innerHTML = htmlStr;
    }
    addInput.focus()
    renderView(todoList);
    addBtn.onclick = function () {
        const value = addInput.value.trim();
        if (!value) {
            return
        }
        const obj = {
            content: value,
            completed: false,
            id: Date.now() + ''
        }
        todoList.push(obj);
        renderView(todoList);
        addInput.value = '';
        todoStorage.setItem(todoList);
    }
    addInput.addEventListener('keyup', e => {
        e = e || w.event;
        if (e.keyCode === 13) {
            addBtn.click()
        }
    }, false)

    let editFlag = false,
        beforeValue = '',
        nowValue = '',
        id = 0,
        inputEl = null;
    ul.addEventListener('click', e => {
        e = e || w.event;
        const target = e.target || e.srcElement;
        let parent = target.parentNode;
        id = parent.dataset.id;
        if (target.tagName.toLowerCase() === 'input') {


            if (!editFlag) {
                // 点击的是checkbox
                const spanEl = parent.querySelector('span')
                const checked = target.checked

                if (checked) {
                    spanEl.className = 'active';
                } else {
                    spanEl.className = ''
                }
                todoList = todoList.map(v => {
                    if (v.id === id) {
                        v.completed = checked
                    }
                    return v
                })
                todoStorage.setItem(todoList)

                return
            }



        }

        if (target.tagName.toLowerCase() === 'button') {

            if (!editFlag) {
                //  edit
                if (target.classList.contains('editBtn')) {
                    editFlag = true;
                    parent.style.display = 'none';
                    const editWrap = parent.parentNode.querySelector('.edit-wrap');
                    inputEl = editWrap.querySelector('input');

                    const saveBtn = editWrap.querySelector('.saveBtn')
                    editWrap.style.display = 'flex';
                    todoList.forEach(v => {
                        if (v.id === id) {
                            beforeValue = v.content;
                            nowValue = v.content;
                            return
                        }
                    })
                    inputEl.value = nowValue;
                    inputEl.focus();
                    inputEl.onkeyup = function (e) {
                        e = e || w.event;
                        if (e.keyCode === 13) {
                            saveBtn.click();
                        }
                    }

                    inputEl.onblur = function () {
                        saveBtn.click();
                    }
                    return
                }


                //  del
                parent = parent.parentNode;
                ul.removeChild(parent)
                todoList = todoList.filter(v => v.id !== id)
                todoStorage.setItem(todoList)
                return
            }


            editFlag = false;
            const value = inputEl.value.trim()

            console.log(target);

            // escBtn
            if (target.classList.contains('escBtn')) {
                // console.log('quxu');

                // //  重新渲染
                // renderView(todoList)
                // return

            } else {
                // saveBtn  
                if (!value || value === beforeValue) {
                    // 没有值 重新渲染
                    renderView(todoList)
                    return
                }
            }

            // 有值；修改重新渲染
            const item = todoList.find(v => v.id == id)
            item.content = value;
            renderView(todoList)
            todoStorage.setItem(todoList)
        }
    }, false)

})(window, document)